<template>
  <div class="layout-padding row justify-center">
    <div style="width: 600px; max-width: 100vw; justify-center">
      <p>
        <q-toggle v-model="clientDownImg">扫码APP</q-toggle>
        <a href="http://c.himygirl.cn/api/ftp/hg-latest.apk">备用链接</a>
        <a @click="viewPrivacyPolicy">本站声明</a>
      </p>

      <private-policy ref="private" />

      <q-slide-transition>
        <p v-show="clientDownImg" style="margin: 0; max-width: 600px;text-align:center;">
          <img
            class="responsive"
            src="statics/hg-client-code.png"
          >
        </p>
      </q-slide-transition>
    </div>
    <div class="row justify-center layout-padding page-showcase">
      <div style="width: 850px; max-width: 100vw;" class="row">
        <div
          v-for="(func) in routerList"
          :key="func.hash"
          class="col-xs-6 col-sm-4 col-lg-3"
        >
          <div class="card text-center category-link text-primary" @click="$router.push(`/${func.hash}`)">
            <q-icon :name="func.icon" />
            <p class="caption">{{func.title}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { QAlert, QIcon, QBtn, QSlideTransition, QToggle } from "quasar";
import PrivatePolicy from "./private-policy";

export default {
  components: {
    QAlert,
    QIcon,
    QBtn,
    QSlideTransition,
    QToggle,
    PrivatePolicy
  },
  data() {
    return {
      clientDownImg: false, //客户端下载二维码
      category: false,
      routerList: [
        {
          title: "我的girl区",
          icon: "people",
          hash: "community/my-topic"
        },
        {
          title: "个人主页",
          icon: "person",
          hash: "personal/personal-home"
        },
        {
          title: "购物券",
          icon: "store",
          hash: "mall/coupon-item"
        },
        {
          title: "设置",
          icon: "settings",
          hash: "personal/sys-settings"
        },
        {
          title: "关于",
          icon: "info",
          hash: "sys/aboutme"
        },
        {
          title: "实验室",
          icon: "move to inbox",
          hash: "sys/sys-experience"
        }
      ]
    };
  },
  methods: {
    //查看隐私声明
    viewPrivacyPolicy() {
      this.$refs.private.show();
    }
  }
};
</script>

<style lang="stylus">
@import '~variables';

.page-showcase {
  img {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
  }

  .card {
    cursor: pointer;
    position: relative;
    padding: 16px;

    .q-icon {
      font-size: 56px;
    }

    p {
      color: rgba(0, 0, 0, 0.87);
      margin: 15px 0 0 0 !important;
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.2s;
      background: currentColor;
    }

    &:hover:before {
      opacity: 0.4;
    }
  }
}
</style>
